<template>
    <div class="detail-container">
        <!-- <JLock :close="true"></JLock> -->
        <div class="d-card">
            <JLoding v-if="loding"></JLoding>
            <div class="d-title">TRANSACTION EXPLORER</div>
            <div class="d-content">
                <div class="d-row">
                    <span class="row-lable">NETWORK</span>
                    <div class="row-content">
                        <img :src="getImg('ETH')" class="content-logo" />
                        <span>{{ tableForm?.net || '-' }}</span>
                    </div>
                </div>
                <div class="d-row">
                    <span class="row-lable">TRANSACTION HASH</span>
                    <div class="row-content  coin-link" style="color: #FCC235;" @click="onJump(tableForm?.txnHash)">
                        <span>{{ tableForm?.txnHash || '-' }}</span>
                    </div>
                </div>
                <div class="d-row">
                    <span class="row-lable">STATUS</span>
                    <div class="row-content" style="color: #0DCB81;">
                        <span>COMPLETED</span>
                    </div>
                </div>
                <div class="d-row">
                    <span class="row-lable">BLOCK</span>
                    <div class="row-content">
                        <span>#{{ tableForm?.blockNumber || '-' }}</span>
                    </div>
                </div>
                <div class="d-row">
                    <span class="row-lable">TIME</span>
                    <div class="row-content">
                        <span class="ago" :title="tableForm?.time ? formatTimestamp(tableForm?.time) : '-'">{{
                            tableForm?.date || '-' }}</span>
                        <!-- <span class="time">( {{ tableForm?.time ? formatTimestamp(tableForm?.time) : '-' }} )</span> -->
                    </div>
                </div>
                <div class="d-line"></div>
                <div class="d-row">
                    <span class="row-lable">FROM</span>
                    <div class="row-content">
                        <div class="icon-box">
                            <span class="iconfont ic-c"
                                :class="tableForm?.fromAddressType == 'eoa' ? 'icon-touxiang' : 'icon-icon_xinfang'"></span>
                        </div>
                        <Copy :isCopy="true" :hide="false" :text="tableForm?.fromAddress">
                        </Copy>
                    </div>
                </div>
                <div class="d-row">
                    <span class="row-lable">TO</span>
                    <div class="row-content">
                        <div class="icon-box">
                            <span class="iconfont ic-c"
                                :class="tableForm?.toAddressType == 'eoa' ? 'icon-touxiang' : 'icon-icon_xinfang'"></span>
                        </div>
                        <Copy :isCopy="true" :hide="false" :text="tableForm?.toAddress">
                        </Copy>
                    </div>
                </div>
                <div class="d-line"></div>
                <div class="d-row">
                    <span class="row-lable">VALUE</span>
                    <div class="row-content" v-if="tableForm?.outSymbol == '0x'">
                        <span>{{ tableForm?.outAmount ? Math.abs(tableForm?.outAmount) : 0
                        }} ETH</span>
                    </div>
                    <div class="row-content" v-else-if="tableForm?.inSymbol == '0x'">
                        <span>{{ tableForm?.inAmount ? Math.abs(tableForm?.inAmount) : 0
                        }} ETH</span>
                    </div>
                    <div class="row-content" v-else>
                        <span>0 ETH</span>
                    </div>
                </div>
                <div class="d-row">
                    <span class="row-lable">TOTAL FEE</span>
                    <div class="row-content">
                        <span>{{ tableForm?.transFee }}</span>
                    </div>
                </div>
                <div class="d-row">
                    <span class="row-lable">GAS PRICE</span>
                    <div class="row-content">
                        <span>{{ numberWithCommas(tableForm?.gasPrice,9) }} Gwei</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="transfer">
            <div class="t-title">
                TOKEN TRANSFERS({{ tableList.length }})
            </div>
            <div class="t-head">
                <div class="t-item t-row1">
                    <img class="logo" src="@/assets/svg/linkTable.svg">
                </div>
                <div class="t-item t-row2">
                    <span>FROM</span>
                </div>
                <div class="t-item t-row3">
                    <span>TO</span>
                </div>
                <div class="t-item t-row4">
                    <span class="t-row4-left">VALUE</span>
                    <span class="t-row4-right">COIN</span>
                </div>
                <div class="t-item t-row5">
                    <span>USD</span>
                </div>
                <div class="t-item t-row6">
                    <span>TIME</span>
                </div>
            </div>
            <div class="t-list" v-if="loding">
                <JLoding></JLoding>
            </div>
            <div class="t-list" v-else>
                <JEmpty v-if="tableList.length == 0"></JEmpty>
                <div class="t-table" v-for="(item, index) in tableList" :key="index">
                    <div class="t-item t-row1">
                        <img :src="getImg('ETH')" class="logo" />
                    </div>
                    <div class="t-item t-row2">
                        <div class="icon-box">
                            <span class="iconfont ic-c"
                                :class="item.fromAddressType == 'eoa' ? 'icon-touxiang' : 'icon-icon_xinfang'"></span>
                        </div>
                        <Copy :isCopy="true" :hide="true" :num="8" :text="item.fromAddress">
                        </Copy>
                    </div>
                    <div class="t-item t-row3">
                        <div class="icon-box">
                            <span class="iconfont ic-c"
                                :class="item.toAddressType == 'eoa' ? 'icon-touxiang' : 'icon-icon_xinfang'"></span>
                        </div>
                        <Copy :isCopy="true" :hide="true" :num="8" :text="item.toAddress">
                        </Copy>
                    </div>
                    <div class="t-item t-row4">
                        <span class="t-row4-left">{{ formatBigNumber(Math.abs(item.outAmount)) }}</span>
                        <span class="t-row4-right">{{ item.outSymbol }}</span>
                    </div>
                    <div class="t-item t-row5">
                        <span>${{ formatBigNumber(item.usd) }}</span>
                    </div>
                    <div class="t-item t-row6">
                        <span>{{ item.date }}</span>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted, onUnmounted } from "vue"
import { URL_HASH_QUERY } from "@/comm/api";
import { get } from "@/comm/request";
import { formatTimeAgo, formatBigNumber, formatTimestamp,numberWithCommas } from "@/comm/format";
import Copy from "@/components/copy/index.vue";
import JEmpty from "@/components/j-empty/index.vue";
import JLoding from "@/components/j-loding/index.vue";
import { useTokens } from "@/stores/tokens";
import { useRouter } from "vue-router";
import JLock from "@/components/j-lock/index.vue";
import { useLock } from "@/hooks/useLock";
const tokens = useTokens();
const { unlock } = useLock(3000);
const router = useRouter();
const hashID = ref<Number | String>('');
let timerId: any;
const loding = ref<Boolean>(true);
const tableList = ref<transferType[]>([]);
const tableForm = ref<transferType | null>();
interface DataRes {
    data: transferType[];
}
interface transferType {
    blockNumber: number;
    blockHash: string;
    method: string;
    time: number | undefined;
    txnHash?: string | undefined;
    fromAddress: string;
    fromAddressType?: any;
    toAddress: string;
    toAddressType?: any;
    inSymbol: string;
    inAmount: number;
    outSymbol: string;
    outAmount: number;
    inTokenAddress: string;
    outTokenAddress: string;
    usd: number;
    transFee: number;
    gasPrice: number;
    action?: any;
    relationAddress?: any;
    relationType?: any;
    date?: any;
    net?: string;
};
const queryHash = async (id: any) => {
    try {
        const res: DataRes = await get(URL_HASH_QUERY.replace("@", id));
        if (res.data.length > 0) {
            tableList.value = res.data.map((item) => {
                return {
                    ...item,
                    date: formatTimeAgo(item.time)
                }
            })
            tableForm.value = res.data.find((item) => item.transFee > 0)
            setIntervalData()
            loding.value = false;
        }
        console.log('查询交易详情', res)
    } catch (err) {
        loding.value = false;
        onJump(hashID.value)
    }
}
const getImg = (str: string) => {
    return tokens.getImg(str);
};
const onJump = (txnHash: any) => {
    window.open("https://etherscan.io/tx/" + txnHash);
};
const setIntervalData = () => {
    timerId = window.setInterval(() => {
        tableList.value.forEach((val: any) => {
            val.date = formatTimeAgo(val.time);
        })
        tableForm.value!.date = formatTimeAgo(tableForm.value!.time);
    }, 1000)
}
onMounted(() => {
    const hash = window.location.hash;
    const pathname = window.location.pathname;
    if (hash) {
        let recommend = hash.split('#')[1];
        if (recommend) {
            localStorage.setItem('code', recommend);
            console.log('获取路由hash', recommend)
        }
    }
    if (pathname) {
        let id = pathname.split('/txn/')[1];
        hashID.value = id
        console.log('获取路由pathname', id)
        queryHash(id)

    }
})
onUnmounted(() => {
    clearInterval(timerId)
})

</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
